<template>
	<div>
		<vue-qr :logoSrc="imageUrl" :text="url" :size="200" :colorDark="colorDark"></vue-qr>
	</div>
</template>

<script>
	import vueQr from "vue-qr";
	export default {
		components: {
			vueQr
		},
		name: "qrView",
		props: ['url', 'imageUrl', 'colorDark'],
		
		data() {
			return {}
		},
		mounted() {
			this.$nextTick(function() {
				this.bindQRCode();
			})
		},
		methods: {
			bindQRCode() {
				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: this.url, // 需要转换为二维码的内容
					width: 100,
					height: 100,
					colorDark: "#000000",
					colorLight: "#ffcbfb",
					correctLevel: QRCode.CorrectLevel.H,
				});
			}
		}

	}
</script>
<style scoped>
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
</style>
